<template>
  <div class="order_page">
    <div class="commons_top">
      <div class="commons_back" @click="$router.go(-1)">
        <img src="@/assets/index/back.png" />
      </div>
      <span class="commons_title">我的订单</span>
    </div>
    <div v-infinite-scroll="loadMore" infinite-scroll-disabled="loading" infinite-scroll-distance="15">
      <div v-if="orderList && orderList.length>0">
        <div class="order_list" v-for="item in orderList" :key="item.id">
          <div class="order_time">{{item.uploadTime}}</div>
          <div class="order_wrap">
            <div class="order_top">
              <span>订单编号：{{item.code}}</span>
              <span class="order_status">{{item.statusZh}}</span>
            </div>
            <div class="order_details">
              <div class="order_left" @click='orderDet(item.id,item.orderType)'>
                <img class='order_cover' src="@/assets/my/cover.png" v-if="item.orderType == 1">
                <img class='order_cover' :src="coverUrl(item.infoList[0].cover)" 
                @error="errImg(item.infoList[0].type==1?'book':item.infoList[0].type==4?'video':'audio')" v-else>
              </div>
              <div class="order_right">
                <div class="order_name" @click='orderDet(item.id,item.orderType)'>{{item.infoList[0].name}}</div>
                <div class="order_price">小计：<span>￥{{item.payment.toFixed(2)}}</span></div>
              </div>
            </div>
            <div class="order_bottom" v-if="item.status!=6&&item.status!=-1">
              <div class="order_btn" @click="payBtn(item.payment,item.id)">去付款</div>
            </div>
          </div>
        </div>
      </div>
      <p v-if="loading" class="order-infinite-loading">
        <span>
          <mt-spinner type="fading-circle"></mt-spinner>
          加载中...
        </span> 
      </p>
      <p v-else class="loadOver">
        <span v-if="!isNull && isLast">—— 我是有底线的 ——</span>
      </p>
      <div v-if="orderList && orderList.length <= 0 && !loading" class="resource_null">
        <img src="@/assets/common/no_order.png" class="null_image">
        <div class="null_tips">暂无订单</div>
        <router-link :to="{name:'index'}"><div class="null_book">去书库逛逛</div></router-link>
      </div>
    </div>
    <!-- 支付弹窗 -->
    <pay-item :dialog="payDialog" @setDialog='setDialog' :currentPrice="currentPrice" :currentId="currentId" @getDet="getDet" :payType="payType"></pay-item>
  </div>
</template>

<script>
import '@static/css/common.css'
import { Toast } from 'mint-ui';
import { getOrderAPI } from '@/api/order.js'
import pay from '@/components/pay'

export default {
  name:'myorder',
  components: { payItem: pay },
  data() {
    return {
      orderList: [],
      listQuery: {
        pageNum: 1,
        pageSize: 15
      },
      loading:false,
      totalPage:null,
      isNull: '',
      isLast: '',
      payDialog: false,
      currentPrice: null,
      currentId: null,
      payType: true
    }
  },
  mounted() {
    this.getList()
  },
  methods: {
    payBtn(price,id) {
      this.currentPrice = price
      this.currentId = id
      this.payDialog = true
    },
    setDialog(val) {
      this.payDialog = val
    },
    getDet() {
      this.orderDet()
    },
    getList(){
      this.loading = true
      getOrderAPI(this.listQuery).then(res => {
        if (res.data.code == 0) {
          var list = []
          if (this.listQuery.pageNum == 1) { //第一页
            list = res.data.data.list
          } else {
            list = this.orderList.concat(res.data.data.list)
          }
          this.orderList =  list
          this.totalPage =  res.data.data.pages
          this.isNull = list && list.length > 0 ? false : true
          this.isLast = res.data.data.pages == this.listQuery.pageNum ? true : false
          this.loading = false
        } else {
          Toast(res.data.msg);
        }
      })
    },
    loadMore() {
      if(this.totalPage > this.listQuery.pageNum) {//判断是否有下一页
        this.listQuery.pageNum = this.listQuery.pageNum + 1
        this.getList() //列表
      }
    },
    orderDet(id,type) {//订单详情
      this.$router.push({name:'orderDet',query:{id:id,orderType:type}})
    },
  },
}
</script>


<style scoped>
.order_page{
  width: 100%;
  background: #F8F8F8;
  min-height: 100vh;
  padding-bottom: 0.2rem;
}
.order_page .commons_top {
  background: #fff;
}
.order_list{
  margin: 0.2rem;
}
.order-infinite-loading{
  text-align: center;
  padding: 10px;
  color: #999999;
}
.order_time {
  text-align: center;
  color: #CCCCCC;
  font-size: 11px;
  margin-bottom: 0.2rem;
}
.order_wrap {
  background: #fff;
  padding: 0 0.25rem 0.3rem;
  box-sizing: border-box;
  border-radius: 0.1rem;
  box-shadow:0px 2px 40px 0px rgba(96,96,96,0.04);
}
.order_top{
  color: #999999;
  padding: 0.4rem 0 0;
  font-size: 12px;
}
.order_status{
  float: right;
}
.order_details{
  padding: 0.43rem 0 0;
  display: flex;
}
.order_left{
  width: 1.1rem;
  height: 1.51rem;
  margin-right: 0.3rem;
}
.order_cover{
  width: 100%;
  height: 100%;
  border-radius: 0.09rem;
}
.order_right{
  flex: 1;
}
.order_name {
  font-weight:bold;
  font-size: 15px;
  color: #202021;
  white-space: normal;
  overflow: hidden;
  word-break: break-all;
  -webkit-box-orient: vertical;
  -webkit-line-clamp:1;
  text-overflow:ellipsis;
  display: -webkit-box;
}
.order_bottom{
  overflow: hidden;
  margin-top: 0.44rem;
  font-size: 14px;
}
.order_price{
  float: right;
  color: #999999;
  font-weight:500;
  margin-top: 0.97rem;
  font-size: 13px;
}
.order_price span{
  color: #333333;
}
.order_btn{
  float: right;
  width: 1.31rem;
  height: 0.6rem;
  background: #FFFFFF;
  border: 1px solid #FF7168;
  border-radius: 0.09rem;
  text-align: center;
  line-height: 0.6rem;
  color: #FF7168;
  font-size: 13px;
}
/*无数据*/
.resource_null{
  text-align: center;
}
.resource_null .null_image{
  width: 3.21rem;
  height:auto;
  margin: 0 auto;
  font-weight:500;
  margin-top: 1.8rem;
}
.resource_null .null_tips{
  margin-top: 0.19rem;
  color: #E0E0E0;
  font-size: 13px;
}
.resource_null .null_book {
  width: 3.39rem;
  height: 0.8rem;
  text-align: center;
  line-height: 0.8rem;
  margin: 1.02rem auto 0;
  background: #FF7167;
  border-radius: 0.1rem;
  color: #FAFAFA;
  font-size: 14px;
  font-weight: bold;
}
</style>

<style>
.mint-spinner-fading-circle{
  margin: 0 auto;
  margin-bottom: 10px;
  font-size: 14px;
}
.loadOver{
  height: 0.8rem;
  text-align: center;
  line-height: 0.8rem;
  color: #999999;
  font-size: 14px;
}
</style>